<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
	<meta name="robots" content="index, follow">
    <link rel="shortcut icon" type="image/png" href="../../../../../../contracts/favicon.png">
	<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<!--	<link href="../../lib/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap.min.css" th:href="@{/lib/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap.min.css}" rel="stylesheet">-->
<!--	<script src="../../lib/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/js/bootstrap.min.js" th:src="@{/lib/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/js/bootstrap.min.js}"  ></script>-->
	<link rel="stylesheet" type="text/css" href="../../static/css/bootstrap.min.css?9188" th:href="@{/css/bootstrap.min.css?9188}">
	<link rel="stylesheet" type="text/css" href="../../static/css/style.css?8116" th:href="@{/css/style.css?8116}">
	<link rel="stylesheet" type="text/css" href="../../static/css/animate.min.css?7456" th:href="@{/css/animate.min.css?7456}">
	<link href='https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900&display=swap&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <title>select_contract_needAllocation</title>


    
<!-- Analytics -->
 
<!-- Analytics END -->
    
</head>
<body>



<!-- Main container -->
<div class="page-container">
    
<!-- bloc-0 -->
<div class="bloc bg1 bgc-azure l-bloc" id="bloc-0">
	<div class="container bloc-sm">
		<div class="row">
			<div class="col">
				<nav th:replace="_fragments :: nav" class="navbar navbar-light row navbar-expand-md nav-invert" role="navigation">
					<button id="nav-toggle" type="button" class="ui-navbar-toggler navbar-toggler border-0 p-0" data-toggle="collapse" data-target=".navbar-27707" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse navbar-27707">
						<ul class="site-navigation nav navbar-nav">
							<li class="nav-item">
								<a href="loginup.html" th:href="@{/}" class="nav-link a-btn ltc-white">首页</a>
							</li>
							<li th:if="${session.nowUser.ifHasRight(1)}" class="nav-item">
								<a href="contract/draft.html" th:href="@{/toDraft}" class="nav-link a-btn ltc-white">起草合同</a>
							</li>
							<li th:if="${session.nowUser.ifHasRight(5)}" class="nav-item">
								<a href="select.html" th:href="@{/toCounterSign}" class="nav-link a-btn ltc-white">会签合同</a>
							</li>
							<li th:if="${session.nowUser.ifHasRight(2)}" class="nav-item">
								<a href="finalization.html" th:href="@{/toFinalize}" class="nav-link a-btn ltc-white">定稿合同</a>
							</li>
							<li th:if="${session.nowUser.ifHasRight(6)}" class="nav-item">
								<a href="approval.html" th:href="@{/toExamine}" class="nav-link a-btn ltc-white">审批合同</a>
							</li>
							<li th:if="${session.nowUser.ifHasRight(7)}" class="nav-item">
								<a href="sign.html" th:href="@{/toSign}" class="nav-link a-btn ltc-white">签订合同</a>
							</li>
						</ul>
					</div>
					<a class="navbar-brand mr-0" style="color: white" href="/toMe">mcx <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16"><path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></svg></a>

				</nav>
			</div>
		</div>
	</div>
</div>
<!-- bloc-0 END -->
<div id="contract_div" class="container-lg  p-lg-5">
	<div class="row ">
		<div class="col-md-10">
			<div class="input-group mb-3">
				<div class="input-group-append">
					<span class="input-group-text" id="basic-addon2">合同名:</span>
				</div>
				<input id="Cname_input" type="text" class="form-control input-mini">
				&nbsp;<div class="input-group-append">
				<span class="input-group-text" id="basic-addon3">客户名:</span>
				</div>
				<select id="Ccustomer_select"  class="form-control">
					<option value=""></option>
					<option value="" th:value="${customer.getCustomerid()}" th:each="customer : ${customers}" th:text="${customer.getCustomername()}"></option>
				</select>
				&nbsp;
			</div>
		</div>
		<div class="col-md-2">
			<button v-on:click="listContractSelective(1)" type="button" class="btn btn-success">
				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
					<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
				</svg>
				Search
			</button>
		</div>
	</div>
	<div class="row">
		<div class="col-md">
			<input type="checkbox" @change="changeASBox"  id="assignBox"> 等待分配
			&nbsp;
			<input type="checkbox" @change="changeCSBox"  id="counterSignBox"> 等待会签
			&nbsp;
			<input type="checkbox" @change="changeFZBox"  id="finalizeBox"> 等待定稿
			&nbsp;
			<input type="checkbox" @change="changeEXBox"  id="examBox"> 等待审批
			&nbsp;
			<input type="checkbox" @change="changeSNBox"  id="signBox"> 等待签订
			&nbsp;
			<input type="checkbox" @change="changeFIBox"  id="finishBox"> 已完成
		</div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<table id="customer_table" class="table table-hover table-bordered">
				<tr>
					<th>合同id</th>
					<th>合同名</th>
					<th>客户</th>
					<th>开始时间</th>
					<th>结束时间</th>
					<th>合同状态</th>
					<th>操作</th>
				</tr>
				<tr v-for="contract in contracts">
					<td>{{contract.contractid}}</td>
					<td>{{contract.contractname}}</td>
					<td>{{contract.customerName}}</td>
					<td>{{contract.beginTimeStr}}</td>
					<td>{{contract.endTimeStr}}</td>
					<td v-if="contract.type==1">等待分配</td>
					<td v-if="contract.type==2">等待会签</td>
					<td v-if="contract.type==3">等待定稿</td>
					<td v-if="contract.type==4">等待审批</td>
					<td v-if="contract.type==5">等待签订</td>
					<td v-if="contract.type==6">已完成</td>
					<td>
						<a href="#" v-show="contract.type!=6" v-on:click="remindEmail(contract.contractid)" th:if="${session.nowUser.ifHasRight(7)}" >
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-check" viewBox="0 0 16 16">
								<path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2H2Zm3.708 6.208L1 11.105V5.383l4.708 2.825ZM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2-7-4.2Z"/>
								<path d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-1.993-1.679a.5.5 0 0 0-.686.172l-1.17 1.95-.547-.547a.5.5 0 0 0-.708.708l.774.773a.75.75 0 0 0 1.174-.144l1.335-2.226a.5.5 0 0 0-.172-.686Z"/>
							</svg>催促对应人员&nbsp;&nbsp;
						</a>
						<a href="#" :href="'/toShowContract/'+contract.contractid" th:if="${session.nowUser.ifHasRight(7)}" >
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-book" viewBox="0 0 16 16">
								<path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
							</svg>查看合同信息&nbsp;&nbsp;
						</a>
						<a href="#" v-on:click="deleteC(contract.contractid)" th:if="${session.nowUser.ifHasRight(4)}" >
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash text-danger" viewBox="0 0 16 16">
								<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
								<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
							</svg>删除&nbsp;&nbsp;
						</a>
					</td>
				</tr>
			</table>
		</div>
	</div>
	<div class="row">
		<div class="col-md-2">
			<input type="checkbox" @change="changeBeginBox"  id="startTimeBox"> 按开始时间升序
		</div>
		<div class="col-md-2">
			<input type="checkbox" @change="changeEndBox"  id="endTimeBox"> 按结束时间升序
		</div>
		<div class="col-md-5 "></div>

		<div class="col-md-2 pull-right mr-auto ">
			<nav aria-label="Page navigation example">
				<ul class="pagination">
					<li v-on:click="prePage(pageInfo.prePage)" class="page-item" v-bind:class="pageInfo.isFirstPage?'disabled' : '' ">
						<a class="page-link" href="#" aria-label="Previous">
							<span aria-hidden="true">&laquo;</span>
						</a>
					</li>
					<li v-on:click="listContractSelective(num)" class="page-item" v-for="num in pageInfo.navigatepageNums">
						<a class="page-link" href="#">{{num}}</a>
					</li>
					<li v-on:click="nextPage(pageInfo.nextPage)" class="page-item" v-bind:class="pageInfo.isLastPage?'disabled' : '' ">
						<a class="page-link" href="#" aria-label="Next">
							<span aria-hidden="true">&raquo;</span>
						</a>
					</li>
				</ul>
			</nav>
		</div>
		<div class="col-md-1">
			<span class="text-danger">{{pageInfo.pageNum}}</span> / <span>{{pageInfo.pages}}</span>页
		</div>
	</div>

</div>

<!-- ScrollToTop Button -->
<a class="bloc-button btn btn-d scrollToTop" onclick="scrollToTarget('1',this)"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32 32"><path class="scroll-to-top-btn-icon" d="M30,22.656l-14-13-14,13"/></svg></a>
<!-- ScrollToTop Button END-->


	<div class="parent" style="width:1500px;height:500px">
		<div id="main" style="width: 400px;height:500px;"></div>
	</div>
	<style>
		/* 1 flex布局 */
		div.parent {
			display: flex;
			/*项目位于容器的中心*/
			justify-content: center;
			/*元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。*/
			align-items: center;
		}
	</style>
<!-- bloc-2 -->
<div class="bloc l-bloc" id="bloc-2">
	<div class="container bloc-lg">
		<div class="row">
			<div class="col-12">
				<h5 class="mg-md text-lg-center">
					Thank ♥ You
				</h5>
				<p class="text-lg-center">
					Renxiang Jia,2024
				</p>
			</div>
		</div>
	</div>
</div>
<!-- bloc-2 END -->
<input type="hidden" id="userID_input" th:value="${session.nowUser.getUserid()}">
</div>
<!-- Main container END -->





<!-- Additional JS -->
<script th:src="@{/js/jquery.min.js}" src="../../static/js/jquery.min.js?7482"></script>
<script th:src="@{/js/bootstrap.bundle.min.js?6777}" src="../../static/js/bootstrap.bundle.min.js?6777"></script>
<script th:src="@{/js/blocs.min.js?2512}" src="../../static/js/blocs.min.js?2512"></script>
<script th:src="@{/js/lazysizes.min.js}" src="../../static/js/lazysizes.min.js" defer></script>
<script th:src="@{/js/jquery.min.js}"  type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/vue.js}"  type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/axios.min.js}"  type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
	var counter = [[${COUNTERSIGNING}]];
	var fin = [[${FINALIZING}]];
	var exa = [[${EXAMMING}]];
	var sin = [[${SIGNING}]];
	var wa = [[${WAITING}]];
	var fi = [[${FINISH}]];
    var option = {
        title: {
            text: '总合同分布'
        },
        tooltip: {},
        legend: {
            data:['待处理'],
            top: 400,
            bottom: 20,
            right: 0
        },
        grid: {
            bottom: 150,
            top: 20,
            right: 0,
            left: 50,
            height: 300
        },
        xAxis: {
            data: ["待分配","会签","定稿","审批","签订","已完成"]
        },
        yAxis: {},
        series: [{
            name: '数量',
            type: 'bar',
            data: [wa,counter, fin, exa, sin,fi]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<script>
		var contractTableVue = new Vue({
		el:"#contract_div",
		data:{//定义数据
			now_page:1,
			contracts:[],
			//一些常量
			OK :200,
			pageInfo:[],
			Ctype: 0
		},
		methods:{
			prePage:function (pageNum) {
				if(contractTableVue.pageInfo.isFirstPage){
					return;
				}
				this.listContractSelective(pageNum);
			},
			nextPage:function (pageNum) {
				if(contractTableVue.pageInfo.isLastPage){
					return;
				}
				this.listContractSelective(pageNum);
			},
			listContractSelective:function (pageNum) {
				var contractname = $("#Cname_input").val();
				var content = $("#Ccontent_input").val();
				var customerid = $("#Ccustomer_select option:selected").val();
				var beginTimeFirst = $("#startTimeBox").get(0).checked;
				var endTimeFirst = $("#endTimeBox").get(0).checked;
				var userId =$("#userID_input").val();
				var onlyWhich = this.Ctype;
				axios({
					method: "get",
					url : "contract/list/"+pageNum.toString(),
					params:{contractname:contractname,content:content,
						    customerid:customerid,ifBeginFirst:beginTimeFirst,
						    ifEndFirst:endTimeFirst,userID:userId,
						    onlyWhich:onlyWhich}
				}).then(function (value) {
					if(value.data.code === contractTableVue.OK){
						//成功获取到数据渲染表格
						contractTableVue.contracts = value.data.object.list;
						contractTableVue.pageInfo = value.data.object;
					}else{
						alert("服务器错误,获取数据失败！");
					}
				}).catch();
			},
			changeBeginBox:function () {
				if($("#startTimeBox").get(0).checked){
					$("#endTimeBox").get(0).checked = false;
				}
				this.listContractSelective(1);
			},
			changeEndBox:function () {
				if($("#endTimeBox").get(0).checked){
					$("#startTimeBox").get(0).checked = false;
				}
				this.listContractSelective(1);
			},
			changeCSBox:function () {
				if($("#counterSignBox").get(0).checked){
					$("#finalizeBox").get(0).checked = false;
					$("#examBox").get(0).checked = false;
					$("#signBox").get(0).checked = false;
					$("#assignBox").get(0).checked = false;
					$("#finishBox").get(0).checked = false;
					contractTableVue.Ctype = 2;
				}else{
					contractTableVue.Ctype = 0;
				}
				this.listContractSelective(1);
			},
			changeFZBox:function () {
				if($("#finalizeBox").get(0).checked){
					$("#counterSignBox").get(0).checked = false;
					$("#examBox").get(0).checked = false;
					$("#signBox").get(0).checked = false;
					$("#assignBox").get(0).checked = false;
					$("#finishBox").get(0).checked = false;
					contractTableVue.Ctype = 3;
				}else{
					contractTableVue.Ctype = 0;
				}
				this.listContractSelective(1);
			},
			changeEXBox:function () {
				if($("#examBox").get(0).checked){
					$("#counterSignBox").get(0).checked = false;
					$("#finalizeBox").get(0).checked = false;
					$("#signBox").get(0).checked = false;
					$("#assignBox").get(0).checked = false;
					$("#finishBox").get(0).checked = false;
					contractTableVue.Ctype = 4;
				}else{
					contractTableVue.Ctype = 0;
				}
				this.listContractSelective(1);
			},
			changeSNBox:function () {
				if($("#signBox").get(0).checked){
					$("#counterSignBox").get(0).checked = false;
					$("#finalizeBox").get(0).checked = false;
					$("#examBox").get(0).checked = false;
					$("#assignBox").get(0).checked = false;
					$("#finishBox").get(0).checked = false;
					contractTableVue.Ctype = 5;
				}else{
					contractTableVue.Ctype = 0;
				}
				this.listContractSelective(1);
			},
			changeASBox:function () {
				if($("#assignBox").get(0).checked){
					$("#counterSignBox").get(0).checked = false;
					$("#finalizeBox").get(0).checked = false;
					$("#examBox").get(0).checked = false;
					$("#signBox").get(0).checked = false;
					$("#finishBox").get(0).checked = false;
					contractTableVue.Ctype = 1;
				}else{
					contractTableVue.Ctype = 0;
				}
				this.listContractSelective(1);
			},
			changeFIBox:function () {
				if($("#finishBox").get(0).checked){
					$("#counterSignBox").get(0).checked = false;
					$("#finalizeBox").get(0).checked = false;
					$("#examBox").get(0).checked = false;
					$("#signBox").get(0).checked = false;
					$("#assignBox").get(0).checked = false;
					contractTableVue.Ctype = 6;
				}else{
					contractTableVue.Ctype = 0;
				}
				this.listContractSelective(1);
			},
			deleteC : function (id) {
				var kouling = prompt("请重复合同Id:");
				if (kouling==id){
					axios({
						method: "post",
						url : "contract/delete/"+id.toString()
					}).then(function (value) {
						if(value.data === 200){
							//成功获取删除给出提示并重新获取用户列表渲染表格
							alert("删除成功！");
							contractTableVue.listContractSelective(1);
						}else{
							alert("服务器错误,删除失败！");
						}
					}).catch();
				}else if(kouling !=null) {
					alert("id不一致!");
				}
			},
            remindEmail : function (contractid) {
                    axios({
                        method: "post",
                        url : "contract/toRemind/"+contractid.toString()
                    }).then(function (value) {
                        if(value.data === 200){

                            alert("已发送邮件提醒用户");
                        }else{
                            alert("服务器错误,发送失败！");
                        }
                    }).catch();
            }
		},
		mounted:function () {
			this.listContractSelective(1);
		}
	});
</script>

</body>
</html>
